<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="/css/index.css">
  <link rel="stylesheet" href="/css/app.css">
<link rel="stylesheet" href="./css/index2.less">
  <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="./js/less.min.js"></script>
</head>

<body>

  <div id="app">
    <div class="header " :style="style">
      <div class="content flex-align-center flex flex-justify-space-evenly">
        <a href="#" style="width: 120px;">
          <el-image style="width: 120px;height: 34px;" v-if="index ==0" src="/img/logo.png" fit="cover"></el-image>
          <el-image style="width: 120px;height: 34px;" v-if="index !=0" src="/img/4.png" fit="cover"></el-image>

        </a>
        <div class="navbar-menu-wrapper flex flex-justify-around ">
          <div class="name">我要装修 <i class="el-icon-arrow-down"></i></div>
          <div class="name">运营中心招募</div>
          <div class="name">服务者招募</div>
          <div class="name">关于考拉</div>
          <div class="name">家居快讯</div>
          <div class="name">下载app</div>
          <el-button type="success" class="login" round size="mini">登录</el-button>
        </div>
      </div>

    </div>
    <div @mousewheel="goWheel">
      <el-carousel height="100vh" direction="vertical" @change='change' :autoplay="false" trigger="click" ref="swiper"
        :loop="false" :interval="4000">
        <el-carousel-item class="carousel-item-1">
          <el-image src="/img/Body.png" fit="cover" class="body-one"></el-image>
          <div class="body-box">
            <el-image src="/img/2.png" fit="cover" class="body-two"></el-image>
            <div class="flex flex-align-center" style="margin-top: 38px;">
              <el-image src="/img/3.png" fit="cover"></el-image>
              <div class="boby-box-text">扫描二维码
                下载APP</div>
            </div>
          </div>

        </el-carousel-item>


        <el-carousel-item class="carousel-item-2">
          <div class="item-box-two">
            <el-image src="/img/5.png" fit="cover" class="body-three"></el-image>
            <el-carousel height="100%" direction="vertical" :autoplay="false" class="carousel-item2" :loop="false">
              <el-carousel-item class="carousel-item2-1">
                <el-image src="/img/6.png" fit="cover" class="body-four"></el-image>
                <el-image src="/img/7.png" fit="cover" class="body-five"></el-image>
                <div class="drop">
                  <div></div>
                  <div></div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-carousel-item>


        <el-carousel-item class="carousel-item-3">
          <div class="item-box-two ">
            <el-carousel height="673px" direction="vertical" :autoplay="false" class="carousel-item2" :loop="false">
              <el-carousel-item class="carousel-item3-1">
                <el-image src="/img/6.png" fit="cover" class="body-four" style="margin-left: 60px;"></el-image>
                <el-image src="/img/7.png" fit="cover" class="body-five"></el-image>
                <div class="drop2">
                  <div></div>
                  <div></div>
                </div>
              </el-carousel-item>
            </el-carousel>
            <el-image src="/img/5.png" fit="cover" class="body-three"></el-image>
          </div>
        </el-carousel-item>


        <el-carousel-item class="carousel-item-4">
          <div class="carousel-item-4-box flex flex-align-center">
            <div class="flex">
              <el-image src="/img/12.png" fit="cover" class="body-twelve"></el-image>
              <el-image src="/img/14.png" fit="cover" style="width:178px;height:178px;margin-top:55px;margin-left:20px"
                class="body-twelve"></el-image>
            </div>
            <div class="felx">
              <el-image src="/img/14.png" fit="cover"
                style="width:178px;height:178px;margin-bottom:55px;margin-right:20px" class="body-twelve"></el-image>

              <el-image src="/img/12.png" fit="cover" class="body-twelve"></el-image>
            </div>
          </div>


        </el-carousel-item>
        <el-carousel-item class="carousel-item-5">
          <div>
            <div style="text-align: center;">
              <el-image src="/img/16.png" fit="cover" style="width: 727px;height: 114px;margin-top:155px ;"></el-image>
            </div>

            <div class="flex flex-align-center" style="margin-top: 91px;">
              <el-image src="/img/17.png" fit="cover" style="width: 59px;height: 52px;"></el-image>
              <div style="margin-left:19px;font-size:36px;font-weight: bold;color: #69B35D;"> <span>小匠保</span> | <span
                  style="color: #141414;">八大要点</span>
              </div>
            </div>

            <div class="flex flex-justify-around" style="margin-top: 57px;">
              <div class="guarantee" v-for="item in 4" :key="item">
                <div style="font-weight:Bold">· 开放平台 </div>
                <div style="text-align: center;text-indent: 7px;font-size: 14px;padding:10px 0;">
                  平台汇聚上千的工长、设计师，可直接交流
                </div>
                <div style="font-weight:Bold">· 不分包 </div>
                <div style="text-align: center;text-indent: 7px;font-size: 14px;">
                  去除中间环节，装修项目透明化、责任制
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        one: true,
        index: 0,
        style: {
          background: 'transparent',
          color: 'white'
        }
      },

      methods: {
        goWheel(event) {

          if (event.deltaY > 80 && this.one == true) {
            this.$refs.swiper.next();
            this.one = false;
            setTimeout(() => {
              this.one = true
            }, 300)
          }

          if (event.deltaY < -80 && this.one == true) {
            this.$refs.swiper.prev();
            this.one = false;
            setTimeout(() => {
              this.one = true
            }, 300)
          }

        },
        change(index) {
          if (index != 0) {
            setTimeout(() => {
              this.index = index
              this.style.background = "white"
              this.style.color = "black"
            }, 300)

          } else {
            setTimeout(() => {
              this.index = index
              this.style.background = "transparent"
              this.style.color = "white"
            }, 300)
          }





        },


        // u(event) {
        //   if (event.deltaY > 30 && this.one == true) {
        //     this.$refs.swiper2.next();
        //     this.one = false;
        //     setTimeout(() => {
        //       this.one = true
        //     }, 300)
        //   }



        //   if (event.deltaY < -30 && this.one == true) {
        //     this.$refs.swiper2.prev();
        //     this.one = false;
        //     setTimeout(() => {
        //       this.one = true
        //     }, 300)
        //   }
        // }
      },
    })
  </script>
</body>

</html>